<script setup lang="ts">
import { ref } from 'vue';
import { NInput, NButton, NModal } from 'naive-ui';

const props = defineProps<{
  shareUrl: string;
  show: boolean;
}>();

const emit = defineEmits<{
  (e: 'update:show', value: boolean): void;
  (e: 'confirm'): void;
}>();

const copied = ref(false);

const copyUrl = () => {
  navigator.clipboard.writeText(props.shareUrl);
  copied.value = true;
  setTimeout(() => {
    copied.value = false;
  }, 2000);
};

const handleClose = () => {
  emit('update:show', false);
};

const handleConfirm = () => {
  emit('confirm');
};
</script>

<template>
  <NModal :show="show" @update:show="(value) => emit('update:show', value)" preset="card" style="width: 400px"
    @close="handleClose">
    <template #header>
      <div class="flex justify-between items-center">
        <h2 class="text-lg font-bold">分享链接</h2>
      </div>
    </template>
    <div class="flex items-center mt-4">
      <NInput :value="shareUrl" readonly class="flex-grow" />
      <NButton @click="copyUrl" class="ml-2" :type="copied ? 'success' : 'primary'">
        {{ copied ? '已复制' : '复制' }}
      </NButton>
    </div>
    <template #footer>
      <div class="flex justify-end">
        <NButton @click="handleConfirm">
          确定
        </NButton>
      </div>
    </template>
  </NModal>
</template>